<template>
  <div class="app-container">

    <el-card shadow="always" body-style="padding:'20px'">

    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="商品编码" prop="productCore">
        <el-input
          v-model="queryParams.productCore"
          placeholder="请输入商品编码"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>

      <el-form-item label="商品名称" prop="productName">
        <el-input
          v-model="queryParams.productName"
          placeholder="请输入商品名称"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>

      <el-form-item label="分类名称" prop="categoryName">
        <el-input
          v-model="queryParams.categoryName"
          placeholder="请输入分类名称"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>

      <el-form-item>
        <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>






    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['shopping:goods:addpi']"
        >新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['shopping:goods:editpi']"
        >修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['shopping:goods:removepi']"
        >删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['shopping:goods:exportpi']"
        >导出</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>
      <template>
    <el-table  style="width: 100%" border v-loading="loading" @row-dblclick="dbClick" :data="infoList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <!--<el-table-column label="商品ID" align="center" prop="productId" />-->
      <el-table-column label="商品编码" align="center" prop="productCore" />
      <el-table-column label="商品名称" align="center" prop="productName" />
      <el-table-column label="商品销售价格" align="center" prop="price" />
      <el-table-column label="商品加权平均成本" align="center" prop="averageCost" />
      <el-table-column label="上下架状态" align="center">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.publishStatus"
            active-value="0"
            inactive-value="1"
            @change="publishStatusChange(scope.row)"
          ></el-switch>
        </template>
      </el-table-column>
      <el-table-column label="审核状态" align="center">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.auditStatus"
            active-value="0"
            inactive-value="1"
            @change="auditStatusChange(scope.row)"
          ></el-switch>
        </template>
      </el-table-column>

      <el-table-column label="生产日期" align="center" prop="productionDate">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.productionDate, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="商品有效期" align="center" prop="shelfLife" />
      <el-table-column label="商品描述" align="center" prop="descript" :show-overflow-tooltip="true" />
      <el-table-column label="商品录入时间" align="center" prop="indate">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.indate, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="最后修改时间" align="center" prop="modifiedTime">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.modifiedTime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>

      <el-table-column fixed="right" width="210px"  label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleAddPic(scope.row)"
            v-hasPermi="['shopping:master:picadd']"
          >添加图片</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="informationAddPic(scope.row)"
            v-hasPermi="['shopping:master:picadd']"
          >修改产品信息图片</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['shopping:goods:editpi']"
          >修改</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['shopping:goods:removepi']"
          >删除</el-button>
        </template>
      </el-table-column>


    </el-table>
      </template>
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />



    <!-- 添加或修改商品信息对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="450px" append-to-body :before-close="handleClose">
      <el-form ref="form" :model="form"  label-width="130px">
        <el-form-item label="商品名称" prop="productName">
          <el-input v-model="form.productName" placeholder="请输入商品名称" />
        </el-form-item>
        <el-form-item label="商品销售价格" prop="price">
          <el-input v-model="form.price" placeholder="请输入商品销售价格" />
        </el-form-item>
        <el-form-item label="商品加权平均成本" prop="averageCost">
          <el-input v-model="form.averageCost" placeholder="请输入商品加权平均成本" />
        </el-form-item>
        <el-form-item label="生产日期" prop="productionDate">
          <el-date-picker clearable size="small" style="width: 200px"
                          v-model="form.productionDate"
                          type="date"
                          value-format="yyyy-MM-dd"
                          placeholder="选择生产日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item  label="商品有效期" prop="shelfLife">
          <el-input  v-model="form.shelfLife" placeholder="请输入商品有效期" >
            <template slot="append">月</template>
          </el-input>
        </el-form-item>
        <el-form-item label="商品描述" prop="descript">
<!--          <el-input type="textarea" v-model="form.descript" placeholder="请输入商品描述" />-->
<!--          <editor type="textarea" v-model="form.descript" :min-height="192"/>-->
          <QuillEditor v-model="form.descript" @getChildrenStatus="getChildrenStatus"></QuillEditor>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    </el-card>

    <el-card>

      <div :style="uuu">

        <div>
          <h2>商品库存总数量：{{labelQuantitytwo}}</h2>
        </div>
        <el-table v-loading="loading"  @row-dblclick="dbClickPic" :data="pictList" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column label="商品图片ID" align="center" prop="productPicId" />
          <el-table-column label="商品ID" align="center" prop="productId" />
          <el-table-column label="图片描述" align="center" prop="picDesc" />
          <el-table-column label="图片URL" align="center" prop="picUrl" />
          <el-table-column label="是否主图：0.非主图1.主图" align="center" prop="isMaster" />
          <el-table-column label="图片排序" align="center" prop="picOrder" />
          <el-table-column label="图片是否有效：0无效 1有效" align="center" prop="picStatus" />
          <el-table-column label="最后修改时间" align="center" prop="modifiedTime" width="180">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.modifiedTime, '{y}-{m}-{d}') }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-edit"
                @click="handleSpecification(scope.row)"
                v-hasPermi="['shopping:goods:editpi']"
              >添加规格</el-button>
              <el-button
                size="mini"
                type="text"
                icon="el-icon-edit"
                @click="handleUpdatePic(scope.row)"
                v-hasPermi="['shopping:master:picedit']"
              >修改</el-button>
              <el-button
                size="mini"
                type="text"
                icon="el-icon-delete"
                @click="handleDeletePic(scope.row)"
                v-hasPermi="['shopping:master:removeppi']"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>




      <el-dialog :title="titleGg" :visible.sync="openGg" width="450px" append-to-body :before-close="handleClose">
        <el-form ref="formGg" :model="formGg"  label-width="130px">
          <!--<el-form-item label="商品ID" prop="productId">-->
          <!--<el-input v-model="form.productId" placeholder="请输入商品ID" />-->
          <!--</el-form-item>-->
          <el-form-item label="标签名称" prop="labelName">
            <el-input v-model="formGg.labelName" placeholder="请输入标签名称" />
          </el-form-item>
          <!--<el-form-item label="商品图片表ID" prop="productPicId">-->
            <!--<el-input v-model="formGg.productPicId" placeholder="请输入商品图片表ID" />-->
          <!--</el-form-item>-->
          <el-form-item label="标签单位" prop="labelUnit">
            <el-input v-model="formGg.labelUnit" placeholder="请输入标签单位" />
          </el-form-item>

          <el-form-item label="商品库存量" prop="labelQuantity">
            <el-input v-model="formGg.labelQuantity" placeholder="请输入标签单位" />
          </el-form-item>
          <!--<el-form-item label="最后修改时间" prop="modifiedTime">-->
          <!--<el-date-picker clearable size="small" style="width: 200px"-->
          <!--v-model="form.modifiedTime"-->
          <!--type="date"-->
          <!--value-format="yyyy-MM-dd"-->
          <!--placeholder="选择最后修改时间">-->
          <!--</el-date-picker>-->
          <!--</el-form-item>-->
          <el-form-item label="规格价格" prop="labelPrice">
            <el-input v-model="formGg.labelPrice" placeholder="请输入价格" />
          </el-form-item>
          <el-form-item label="状态">
            <el-select  v-model="formGg.labelStatus">
              <el-option label="上架" value="0" />
              <el-option label="下架" value="1" />
            </el-select>
          </el-form-item>
          <el-form-item label="颜色详细" prop="labelColorType">
            <el-input v-model="formGg.labelColorType" placeholder="请输入颜色" />
          </el-form-item>

          <el-form-item label="运费" prop="labelColorType">
            <el-input v-model="formGg.labelFreight" placeholder="请输入运费" />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitFormGg">确 定</el-button>
          <el-button @click="cancelGg">取 消</el-button>
        </div>
      </el-dialog>



    </el-card>

    <el-card>
      <div :style="nnn">
        <div>
          <h3> 商品库存总数：{{labelQuantity}}</h3>
        </div>
        <el-table v-loading="loading" :data="labelList" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column label="标签ID" align="center" prop="labelId" />
          <el-table-column label="商品ID" align="center" prop="productId" />
          <el-table-column label="商品库存" align="center" prop="labelQuantity" />
          <el-table-column label="标签名称" align="center" prop="labelName" />
          <el-table-column label="商品图片表ID" align="center" prop="productPicId" />
          <el-table-column label="标签单位" align="center" prop="labelUnit" />
          <el-table-column label="最后修改时间" align="center" prop="modifiedTime" width="180">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.modifiedTime, '{y}-{m}-{d}') }}</span>
            </template>
          </el-table-column>
          <el-table-column label="价格" align="center" prop="labelPrice" />
          <el-table-column label="状态" align="center" prop="labelStatus" >
            <template slot-scope="scope">
              <el-tag
                :type="scope.row.labelStatus === '0' ? 'success' : 'danger'"
                disable-transitions>{{scope.row.labelStatus ==='0' ? '上架' : '下架'}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="颜色" align="center" prop="labelColorType" />
          <el-table-column label="运费价格" align="center" prop="labelFreight" />
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-edit"
                @click="handleUpdateGg(scope.row)"
              >修改</el-button>
              <el-button
                size="mini"
                type="text"
                icon="el-icon-delete"
                @click="handleDeleteGg(scope.row)"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>


        <!-- 添加或修改商品图片信息对话框 -->
        <el-dialog :title="titlePic" :visible.sync="openPic" width="500px" append-to-body>
          <el-form ref="formPic" :model="formPic" label-width="80px">
            <el-form-item label="图片描述" prop="picDesc">
              <el-input v-model="formPic.picDesc" placeholder="请输入图片描述" />
            </el-form-item>
            <el-form-item label="图片URL" prop="picUrl">

              <el-upload
                class="upload-demo"
                :http-request="upload"
                action="aaa"
                accept=".jpg,.png"
                :limit="1"
                :file-list="fileList"
                :on-remove="handleRemove"
                :before-remove="beforeRemove"
                :on-error="handleError"
                ref="upload">
                <el-button size="small" type="primary">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">仅支持jpg,png格式,以最新上传为准</div>
              </el-upload>

              <!--<el-input v-model="formPic.picUrl" placeholder="请输入图片URL" />-->
            </el-form-item>
            <el-form-item label="是否主图" prop="isMaster">
              <el-input v-model="formPic.isMaster" placeholder="请输入是否主图：0.非主图1.主图" />
            </el-form-item>
            <el-form-item label="图片排序" prop="picOrder">
              <el-input v-model="formPic.picOrder" placeholder="请输入图片排序" />
            </el-form-item>

          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitFormPic">确 定</el-button>
            <el-button @click="cancelPic">取 消</el-button>
          </div>
        </el-dialog>

        <!--产品信息图片-->
        <el-dialog :title="titleInforPic" :visible.sync="openInforPic" width="500px" append-to-body>
          <el-form ref="formInfor" :model="formInfor" label-width="80px">
            <el-form-item label="图片URL" prop="productDetailsUrls">

              <el-upload
                class="upload-demo"
                :http-request="uploadInfo"
                action="aaa"
                accept=".jpg,.png"
                :limit="3"
                :file-list="InfoImgList"
                :on-remove="handleRemoveInfoImage"
                :before-remove="beforeRemoveInfo"
                :on-error="handleError"
                ref="uploadInfo">
                <el-button size="small" type="primary">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">仅支持jpg,png格式,以最新上传为准</div>
              </el-upload>

              <!--<el-input v-model="formPic.picUrl" placeholder="请输入图片URL" />-->
            </el-form-item>

          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitInforPic">确 定</el-button>
            <el-button @click="cancelInforPic">取 消</el-button>
          </div>
        </el-dialog>

      </div>

    </el-card>




  </div>
</template>

<script>
  // import { listInfobi, getInfobi, delInfobi, addInfobi, updateInfobi, ,brandStatusbi } from "@/api/shopping/brandinfo";
  import { listInfopi, getInfopi, delInfopi, addInfopi,deleteDetailsImgByName, updateInfopi, exportInfopi, publishStatusUpdate, auditStatusUpdate, listlabelfindall, getInfolab, removelab, addLabel, updateLabel, listppict,getInfoPic,addInfoPic,updateInfoPic,delInfoPic,listlabelfindproduct,getProductDetailsImgById,uploadImage,addProductDetailsImg } from "@/api/shopping/product";
  import { getCategory } from "@/api/shopping/classifycommon";
  import Editor from '@/components/Editor';
  import QuillEditor from '@/components/Quill-editor';
  export default {
        name: "product",
    components: {
      Editor,QuillEditor,
    },
      data(){
          return{

            // package1: [
            //   {
            //     name: 'iPhoneX',
            //     price: 300,
            //     count: 1
            //   },
            //   {
            //     name: 'iPad',
            //     price: 100,
            //     count: 2
            //   }
            // ],
            InfoImgList:[],
            dialogVisible: false,
            defaultDictType: "",
            typeOptions: [],
            labelList:[],
            // 遮罩层
            loading: true,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // 商品信息表格数据
            infoList: [],
            pictList:[],
            productList:[],
            // 弹出层标题
            title: "",
            titleGg: "",
            titlePic: "",
            titleInforPic:"",
            // 是否显示弹出层
            open: false,
            openGg: false,
            openPic: false,
            openInforPic: false,
            // 查询参数
            queryParams: {
              pageNum: 1,
              pageSize: 10,
              productCore: null,
              productName: null,
              barCode: null,
              brandId: null,
              oneCategoryId: null,
              suanshu: null,
              twoCategoryId: null,
              threeCategoryId: null,
              supplierId: null,
              categoryId: null,
              price: null,
              averageCost: null,
              publishStatus: null,
              auditStatus: null,
              weight: null,
              length: null,
              height: null,
              width: null,
              colorType: null,
              productionDate: null,
              shelfLife: null,
              descript: null,
              indate: null,
              modifiedTime: null,
              cornerQuantity: null,
              labelName: null,
              salesQuantity: null
            },

            uuu:'display:none',
            nnn:'display:none',
            // 表单参数
            formPic: {
              numproductIdPic:0,
            },
            //产品信息表单参数
            formInfor:{
              productId:0,
            },
            formGg: {
              numproductId:0,
              numproductPicId:0,
            },
            form: {
              numSupper:0, // 供应商
              numBrand:0, // 品牌
              numCategory:0, // 分类
            },
          }
      },

    computed: {
          suanshu: function(){
            this.infoList.suanshu= [];
            for (var i=0;i<this.infoList.length;i++){
               this.infoList.suanshu =this.infoList[i].price * this.infoList[i].averageCost;
               console.log("********suanshu*******"+this.infoList.suanshu);
            }
            return this.infoList.suanshu;
          },
      labelQuantity: function () {
        var labelQuantity = 0;
        for(var i = 0; i < this.labelList.length; i++){
          labelQuantity += this.labelList[i].labelQuantity - 0
        }
        return labelQuantity;
      },

      labelQuantitytwo: function () {
        var labelQuantitytwo =0;
        for (var i=0;i<this.productList.length; i++){
          labelQuantitytwo += this.productList[i].labelQuantity - 0
        }
        return labelQuantitytwo
      }

    },

      created() {
        var brandId = parseInt(this.$route.query.brandId);
        const supplierId = parseInt(this.$route.query.supplierId);
        const categoryId = parseInt(this.$route.query.categoryId);
        this.getCategory(categoryId);
        // this.ListInfobi();

      },
      methods: {
        getChildrenStatus: function(data){ // 实时更新子组件的变化
          this.form.descript = data
        },

          //产品信息图片上传
        uploadInfo(param){

          let file = param.file;
          let fileType = file.type;
          let isLt2M = file.size / 1024 / 1024 < 500;
          if (!isLt2M) {
            this.$message.error("上传大小大小必须小于500M");
            this.fileList=[];
            return;
          }
          let form = new FormData();
          form.append("file", file);
          uploadImage(form).then((res)=>{
            if(res.code==200){
              console.log(res.filePath);
              this.formInfor.productDetailsUrls.push("http://51jhf.com/profile/xiazai/"+res.filePath);
            }

          })
        },
        //文件上传
        upload(param){
          let file = param.file;
          let fileType = file.type;
          let isLt2M = file.size / 1024 / 1024 < 500;
          if (!isLt2M) {
            this.$message.error("上传大小大小必须小于500M");
            this.fileList=[];
            return;
          }
          let form = new FormData();
          form.append("file", file);
          uploadImage(form).then((res)=>{
            if(res.code==200){
            this.formPic.picUrl = "http://51jhf.com/profile/xiazai/"+res.filePath;
          }
         // console.log(res);
        })
        },
        beforeRemoveInfo(file, InfoImgList) {
          return this.$confirm(`确定移除 ${file.name}？`);
        },
        //移除文件之前
        beforeRemove(file, fileList) {
          return this.$confirm(`确定移除 ${file.name}？`);
        },
        //移除
        handleRemove(file, fileList){
          this.formPic.picUrl = '';
          this.fileList=[];
        },
        //移除产品信息图片
        handleRemoveInfoImage(file, fileList){
          const picName = `${file.name}`;
          deleteDetailsImgByName(picName).then((res)=>{
            if(res.code == 200){
              this.formPic.picUrl = '';
              this.fileList=[];
            }

          });


        },
        //上传异常
        handleError(err, file, fileList){
          this.$message.error("上传失败");
        },

        informationAddPic(row){
          this.resetInfor();
          getProductDetailsImgById(row.productId).then((res)=>{
            let shuzu =[]
            for (var i=0;i<res.data.length;i++ ){
              const a = {
                name:res.data[i].productDetailsUrl,
                url:res.data[i].productDetailsUrl
              }
              shuzu.push(a);
            };
            this.InfoImgList =shuzu;
          })
          this.openInforPic = true;
          this.titleInforPic = "修改产品信息图片";
          this.formInfor.productId =row.productId;
        },
        handleAddPic(row) {
          this.resetPic();
          this.openPic = true;
          this.titlePic = "添加商品图片信息";
           this.formPic.numproductIdPic =row.productId;
        },
        /** 修改按钮操作 */
        handleUpdatePic(row) {
          this.resetPic();
          const productPicId = row.productPicId || this.ids
          getInfoPic(productPicId).then(response => {
            this.formPic = response.data;
          this.openPic = true;
          this.titlePic = "修改商品图片信息";
        });
        },
        /**添加产品信息图片确认按钮*/
        submitInforPic(){
          this.$refs["formInfor"].validate(valid => {
            if (valid) {
              addProductDetailsImg(this.formInfor).then(response => {
                  if (response.code === 200) {
                    this.msgSuccess("新增成功");
                    this.openInforPic = false;
                    this.getList();
                    this.uuu ='display:none';
                  }
                });
            }
          });
        },
        /** 提交按钮 */
        submitFormPic() {
          this.$refs["formPic"].validate(valid => {
            if (valid) {
              if (this.formPic.productPicId != null) {
                updateInfoPic(this.formPic).then(response => {
                  if (response.code === 200) {
                  this.msgSuccess("修改成功");
                  this.openPic = false;
                  this.getList();
                  this.uuu ='display:none';
                }
              });
              } else {
                addInfoPic(this.formPic).then(response => {
                  if (response.code === 200) {
                  this.msgSuccess("新增成功");
                  this.openPic = false;
                  this.getList();
                  this.uuu ='display:none';
                }
              });
              }
            }
          });

        },

        /** 删除按钮操作 */
        handleDeletePic(row) {
          const productPicIds = row.productPicId || this.ids;
          this.$confirm('是否确认删除商品图片信息编号为"' + productPicIds + '"的数据项?', "警告", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(function() {
            return delInfoPic(productPicIds);
          }).then(() => {
            this.getList();
          this.msgSuccess("删除成功");
        }).catch(function() {});
        },

        resetPic() {
          this.formPic = {
            productPicId: null,
            productId: null,
            picDesc: null,
            picUrl: null,
            isMaster: null,
            picOrder: null,
            picStatus: 0,
            modifiedTime: null
          };
        },
        resetInfor() {
          this.InfoImgList=null,
          this.formInfor = {
            productDetailsId: null,
            productId: null,
            productDetailsUrls: [],
          };
        },


        dbClick(row){
          var productId = row.productId;
          listppict(productId).then(res=>{
            this.pictList = res;
          })
          listlabelfindproduct(productId).then(res=>{
            this.productList = res;
          })
        //   listlabelfindall(productId).then(response => {
        //     this.labelList = response;
        // });
          this.uuu ='display:block';
          // this.nnn ='display:block';
        },


        dbClickPic(row){
          // var productId = row.productId;
          var productPicId = row.productPicId;
          listlabelfindall(productPicId).then(response => {
            this.labelList = response;
        });
          // this.uuu ='display:block';
          this.nnn ='display:block';
        },


        publishStatusChange(row){
          let text = row.publishStatus === "0" ? "上架" : "下架";
          this.$confirm('确认要"' + text + '"商品吗?', "警告", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(function () {
            return publishStatusUpdate(row.productId, row.publishStatus)
          }).then(()=>{
            this.msgSuccess(text + "成功");
          }).catch(function () {
            row.publishStatus = row.publishStatus === "0" ? "1" : "0";
          })
        },


        auditStatusChange(row){
          let text = row.auditStatus === "0" ? "已审核" : "未审核";
          this.$confirm('确认要"' + text + '"吗?', "警告", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(function () {
            return auditStatusUpdate(row.productId, row.auditStatus)
          }).then(()=>{
            this.msgSuccess(text + "成功");
          }).catch(function () {
            row.auditStatus = row.auditStatus === "0" ? "1" : "0";
          })
        },

        getCategory(categoryId){
          getCategory(categoryId).then(res=>{
            this.queryParams.categoryId = res.data.categoryId;
            this.defaultDictType = res.data.categoryId;
            this.getList();
          })
        },

        // ListInfobi(){
        //   listInfobi().then(res=>{
        //     this.typeOptions = res.rows;
        //   })
        // },

        /** 查询商品信息列表 */
        getList() {
          this.loading = true;
          listInfopi(this.queryParams).then(response => {
            this.infoList = response.rows;
            this.total = response.total;
            this.loading = false;
          });
        },
        // 取消按钮
        cancel() {
          this.open = false;
          this.reset();
        },
        cancelGg() {
          this.openGg = false;
          this.resetGg();
        },
        cancelPic(){
          this.openPic = false;
          this.resetPic();
        },
        cancelInforPic(){
          this.openInforPic = false;
          this.resetInfor();
        },
        // 表单重置
        resetGg() {
          this.formGg ={
            labelId: null,
            productId: null,
            labelQuantity: null,
            labelName: null,
            productPicId: null,
            labelUnit: null,
            modifiedTime: null,
            labelPrice: null,
            labelStatus: "0",
            labelColorType: null,
            labelFreight: null
          }
        },
        reset() {
          this.form = {
            productId: null,
            productCore: null,
            productName: null,
            barCode: null,
            brandId: null,
            oneCategoryId: null,
            twoCategoryId: null,
            threeCategoryId: null,
            supplierId: null,
            categoryId: null,
            price: null,
            averageCost: null,
            publishStatus: 0,
            auditStatus: 0,
            weight: null,
            length: null,
            height: null,
            width: null,
            colorType: null,
            productionDate: null,
            shelfLife: null,
            descript: null,
            indate: null,
            modifiedTime: null,
            cornerQuantity: null,
            labelName: null,
            salesQuantity: null
          };
          this.resetForm("form");
        },
        /** 搜索按钮操作 */
        handleQuery() {
          this.queryParams.pageNum = 1;
          this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
          this.resetForm("queryForm");
          this.handleQuery();
        },
        handleClose(done) {
          this.$confirm('确认关闭？')
            .then(_ => {
              done();
            })
            .catch(_ => {});
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
          this.ids = selection.map(item => item.productId)
          this.single = selection.length!==1
          this.multiple = !selection.length
        },

        /** 添加规格 */
        handleSpecification(row){
          this.resetGg();
          this.openGg = true;
          this.titleGg = "添加规格";
           this.formGg.numproductId =row.productId;
           console.log("***********************************"+this.formGg.numproductId)
           this.formGg.numproductPicId = row.productPicId;
          console.log("***********************************"+this.formGg.numproductPicId)
          // numproductPicId
        },

        handleUpdateGg(row){
          this.resetGg();
          const labelId = row.labelId || this.ids
          getInfolab(labelId).then(response => {
            this.formGg = response.data;
          this.openGg = true;
          this.titleGg = "修改商品标签";
        });

        },

        submitFormGg(){
          this.$refs["formGg"].validate(valid => {
            if(valid) {
              if (this.formGg.labelId != null) {
                updateLabel(this.formGg).then(response => {
                  if (response.code === 200) {
                  this.msgSuccess("修改成功");
                  this.openGg = false;
                  this.getList();
                }
              });
              } else {
                addLabel(this.formGg).then(response => {
                    if (response.code === 200) {
                    this.msgSuccess("新增成功");
                    this.openGg = false;
                    this.getList();
                  }
              });
              }
            }
          })
        },





        /** 新增按钮操作 */
        handleAdd() {
          this.reset();
          this.open = true;
          this.title = "添加商品信息";
          this.form.numSupper = parseInt(this.$route.query.supplierId);
          this.form.numBrand = parseInt(this.$route.query.brandId);
          this.form.numCategory = parseInt(this.$route.query.categoryId);
        },
        /** 修改按钮操作 */
        handleUpdate(row) {
          this.reset();
          const productId = row.productId || this.ids
          getInfopi(productId).then(response => {
            this.form = response.data;
            this.open = true;
            this.title = "修改商品信息";
          });
        },
        /** 提交按钮 */
        submitForm() {
          this.$refs["form"].validate(valid => {
            if (valid) {
              if (this.form.productId != null) {
                updateInfopi(this.form).then(response => {
                  if (response.code === 200) {
                    this.msgSuccess("修改成功");
                    this.open = false;
                    this.getList();
                  }
                });
              } else {
                addInfopi(this.form).then(response => {
                  if (response.code === 200) {
                    this.msgSuccess("新增成功");
                    this.open = false;
                    this.getList();
                  }
                });
              }
            }
          });
        },

        /** 删除按钮操作 */
        handleDeleteGg(row) {
          const labelId = row.labelId || this.ids;
          this.$confirm('是否确认删除商品标签编号为"' + labelId + '"的数据项?', "警告", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(function() {
            return removelab(labelId);
          }).then(() => {
            this.getList();
          this.msgSuccess("删除成功");
        }).catch(function() {});
        },

        /** 删除按钮操作 */
        handleDelete(row) {
          const productIds = row.productId || this.ids;
          this.$confirm('是否确认删除商品信息编号为"' + productIds + '"的数据项?', "警告", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(function() {
            return delInfopi(productIds);
          }).then(() => {
            this.getList();
            this.msgSuccess("删除成功");
          }).catch(function() {});
        },
        /** 导出按钮操作 */
        handleExport() {
          const queryParams = this.queryParams;
          this.$confirm('是否确认导出所有商品信息数据项?', "警告", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(function() {
            return exportInfopi(queryParams);
          }).then(response => {
            this.download(response.msg);
          }).catch(function() {});
        }
      }



    }
</script>

<style scoped>

</style>
